<template>
  <el-form>
    <el-row>
      <el-col :span="24">
        <el-form-item prop="title"
                      label="标题"
                      :label-width="labelWidth">
          <el-input :value="value.title"
                    @input="handleInput('title', arguments)" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item prop="type"
                      label="类型"
                      :label-width="labelWidth">
          <dictionary-select group="ACTION"
                             :value="value.type"
                             style="width: 100%"
                             @input="handleInput('type', arguments)" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item prop="icon"
                      label="图标"
                      :label-width="labelWidth">
          <el-input :value="value.icon"
                    @input="handleInput('icon', arguments)" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item prop="hidden"
                      label="隐藏"
                      :label-width="labelWidth">
          <el-input :value="value.hidden"
                    @input="handleInput('hidden', arguments)" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="disabled"
                      label="启用"
                      :label-width="labelWidth">
          <el-switch :value="!value.disabled"
                     @input="handleDisabled" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item prop="url"
                      label="链接"
                      :label-width="labelWidth">
          <el-input :value="value.url"
                    @input="handleInput('url', arguments)" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item prop="transform"
                      label="参数"
                      :label-width="labelWidth">
          <object-input :rows="3"
                        :value="value.transform"
                        @input="handleInput('transform', arguments)" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item prop="preset"
                      label="预设值"
                      :label-width="labelWidth">
          <object-input :rows="3"
                        :value="value.preset"
                        @input="handleInput('preset', arguments)" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import ObjectInput from "../../basic/ObjectInput.vue";
import DictionarySelect from "../../basic/DictionarySelect.vue";
import EditorMixin from "./editor.mixin";
export default {
  name: "ActionAttributeEditor",
  components: {
    DictionarySelect,
    ObjectInput
  },
  mixins: [EditorMixin],
  install (Vue) {
    Vue.component("ActionAttributeEditor", this);
  }
};
</script>
<style scoped>
::v-deep .btn-add {
  padding: 4px 8px !important;
  margin-left: 7px;
  background: #ff8433;
  border-color: #ff8433;
  color: var(--prev-bg-white);
}
.btn-flex {
  display: flex;
  padding-top: 5px;
}
.export-interval {
  height: 30px;
  padding-bottom: 10px;
}
/* ::v-deep.btn-add:hover, .btn-add:focus {
  background-color: var(--prev-icon-color-orange);
    border-color: var(--prev-icon-color-orange);
    color: #FFFFFF;
} */
</style>
